<script setup lang="ts">
import {ref} from 'vue'
import {NForm, NFormItem, NInput, NSelect, NButton, NSpace} from 'naive-ui'

interface SearchParams {
  name: string
  title: string
  menuType: number | null
}

const props = defineProps<{
  onSearch: (params: SearchParams) => void
  onReset?: () => void
}>()

const formRef = ref(null)
const model = ref<SearchParams>({
  name: '',
  title: '',
  menuType: null
})


const handleSubmit = () => {
  props.onSearch(model.value)
}

const handleReset = () => {
  model.value = {
    name: '',
    title: '',
    menuType: null
  }
  props.onReset?.()
}
</script>

<template>
  <div class="search-form">
    <n-form
      ref="formRef"
      :model="model"
      inline
      :label-width="80"
      label-placement="left"
    >
      <n-form-item label="接口地址:" path="name">
        <n-input
          v-model:value="model.name"
          placeholder="请输入菜单名称"
          clearable
        />
      </n-form-item>
      <n-form-item label="标题:" path="title">
        <n-input
          v-model:value="model.title"
          placeholder="请输入菜单标题"
          clearable
        />
      </n-form-item>
      <n-form-item label="状态:" path="menuType">
        <n-select
          v-model:value="model.menuType"
          :options="menuTypeOptions"
          placeholder="请选择菜单类型"
          clearable
          style="width: 180px"
        />
      </n-form-item>
      <n-form-item>
        <n-space>
          <n-button type="primary" @click="handleSubmit">
            查询
          </n-button>
          <n-button @click="handleReset">
            重置
          </n-button>
        </n-space>
      </n-form-item>
    </n-form>
  </div>
</template>

<style scoped>
.search-form {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
</style>
